<?php //include templet('promotion');?>

<style type="text/css">
#box { background: #FFF; width: 238px; height: 410px; margin: -390px 0 0 0; display: block; border: solid 4px #D93600; position: absolute; z-index: 999; opacity: .5 }
#infscr-loading { display: none; }
</style>
<script src="<?php echo SHOP_RESOURCE_SITE_URL.'/js/search_goods.js';?>"></script>
<link href="<?php echo SHOP_TEMPLATES_URL;?>/css/layout.css" rel="stylesheet" type="text/css">
<style>
    .ncp-category { border-bottom: solid 1px #F87622; overflow: hidden;}
    .ncp-category dl { font-size: 0; *word-spacing:-1px/*IE6、7*/; padding-bottom: 5px; margin-top: -1px; border-top: dotted 1px #CCC;}
    .ncp-category dt, .ncp-category dd { font-size: 12px; vertical-align: top; display: inline-block; *display: inline/*IE7*/; padding: 5px 0; *zoom: 1;}
    .ncp-category dt { font-weight: 600; text-align: right; width: 100px; padding: 10px 0;}
    .ncp-category .searchbox dt { line-height: 28px;}
    .ncp-category dd { width: 1100px;}
    .ncp-category ul { font-size: 0; *word-spacing:-1px/*IE6、7*/;}
    .ncp-category li { font-size: 12px; vertical-align: middle; display: inline-block; *display: inline/*IE7*/; padding: 5px 10px; margin-left: 10px;*zoom: 1;}
    .ncp-category .searchbox li { cursor: pointer;}
    .ncp-category li.selected { color: #FFF; background-color: #F87622;}
    .ncp-category li a.selected { font-weight: 600; color: #F87622; }

    #promotionGoods { width: 1220px !important; margin-right: -20px;}
    #promotionGoods .item { width: 305px; padding: 10px 0;}
    #promotionGoods .scope { width: 240px; padding: 19px; border: solid 1px #E6E6E6;
        background: #fff;}
    #promotionGoods .scope:hover { border-color: #E84C3D; box-shadow: 0 0 0 3px rgba(0,0,0, 0.05);}
    #promotionGoods .scope dl.goods { display: block; width: 240px; height: auto; position: relative; z-index: 1;}
    #promotionGoods .scope dl dt { width: 240px; height: 240px;}
    #promotionGoods .scope dl dt a {line-height: 0; text-align: center; vertical-align: middle; display: table-cell; *display: block; width: 240px; height: 240px; padding: 0; overflow: hidden;}
    #promotionGoods .scope dl dt a img { max-width: 240px; max-height: 240px; margin-top:expression(240-this.height/2); *margin-top:expression(120-this.height/2)/*IE6,7*/;}
    #promotionGoods .scope dl dd { text-align: center; width: 240px; height: 48px; position: absolute; z-index: 1; left: 0; bottom: 0; overflow: hidden;}
    #promotionGoods .scope dl dd span {  background-color: #FFF; display: inline-block; padding: 4px; border-radius: 14px; margin: 0 auto;}
    #promotionGoods .scope dl dd span strong { font-size: 12px; font-weight: 600; line-height: 20px; color: #FFF; background:#E84C3D; display: block; padding: 0 5px; border-radius: 10px;}
    #promotionGoods .scope dl dd a { color: #999; background-color: #FFF; line-height: 20px; display: block; width: 240px; padding: 14px 0 0; margin-top: -14px; clear: both; text-align: center;}
    #promotionGoods .scope:hover dl dd { height: auto;}
    #promotionGoods .scope:hover dl dd a { color: #000;}
    #promotionGoods .scope dl dd a:hover { color: #F87622;}
    #promotionGoods .goods-price { display: block; text-align: center; margin-top: 10px;}
    #promotionGoods .goods-price .sale { color: #333; margin-right: 10px;}
    #promotionGoods .goods-price .sale em { font-size: 24px; color: #E84C3D; vertical-align: bottom; margin: 0 2px;}
    #promotionGoods .goods-price .depreciate { display: block; color: #1BBC9D; }
    #promotionGoods .goods-price .depreciate i { font-size: 14px; margin-right: 4px; vertical-align: middle;}
    #promotionGoods .goods-buy { padding: 15px 0; overflow: hidden;}
    #promotionGoods .goods-buy span { line-height: 16px; color: #999; float: left; clear: left; }
    #promotionGoods .goods-buy a.btn { font-size: 14px; background-color: #C1392B; color: #FFF; display: block; float: right; padding: 6px 12px; border-radius: 4px; }
    #promotionGoods .goods-buy a.btn:hover { text-decoration: none; background-color: #E84C3D;}
    #promotionGoods .goodseval { margin-bottom: -10px;}
    #promotionGoods .goodseval li{ font-size: 0; border-top: dotted 1px #E6E6E6; padding: 10px 0;}
    #promotionGoods .goodseval .user-avatar { width: 30px; height: 30px; display: inline-block; vertical-align: top; margin-right: 10px;}
    #promotionGoods .goodseval .user-avatar img { width: 30px; height: 30px; border-radius: 50%;}
    #promotionGoods .goodseval .eval { font-size: 12px; display: inline-block; width: 200px; vertical-align: top;}
    #promotionGoods .goodseval .eval i { color: #CCC; font-size: 14px; margin: 0 2px;}
</style>
<div class="nch-container wrapper">
  <div class="ncp-category">
    <ul>
      <input type="hidden" id="sc_id" value="<?php echo intval($_GET['sc_id'])>0?intval($_GET['sc_id']):'';?>"/>
      <li><a class="<?php echo intval($_GET['gc_id']) <= 0?'selected':'';?>" href="<?php echo urlShop('promotion','index');?>">所有分类</a></li>
      <?php foreach ($output['goods_class'] as $k=>$v){?>
      <li><a class="<?php echo intval($_GET['gc_id']) == $v['gc_id']?'selected':'';?>" href="<?php echo urlShop('promotion','index',array('gc_id'=>$v['gc_id']));?>"}'><?php echo $v['gc_name'];?></a></li>
      <?php } ?>
    </ul>
  </div>
  <div id="promotionGoods">
    <?php require(BASE_TPL_PATH.'/home/promotion.item.php');?>
  </div>
  <div class="tc mt20 mb20">
    <div class="pagination" id="page-nav"></div>
  </div>
</div>
<div id="page-more"><a href="index.php?act=promotion&gc_id=<?php echo $_GET['gc_id'];?>&curpage=2"></a></div>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/js/jquery.raty/jquery.raty.min.js"></script> 
<script src="<?php echo RESOURCE_SITE_URL;?>/js/jquery.masonry.js" type="text/javascript"></script> 
<script src="<?php echo RESOURCE_SITE_URL;?>/js/jquery.infinitescroll.js" type="text/javascript"></script> 
<script>
var $container = $('#promotionGoods');
$container.masonry({
    columnWidth: 305,
    itemSelector: '.item'
});
$(function(){
	$container.infinitescroll({  
        navSelector : '#page-more',
        nextSelector : '#page-more a',
        itemSelector : '.item',
        loading: {
        	selector:'#page-nav',
            img: '<?php echo SHOP_TEMPLATES_URL;?>/images/loading.gif',
            msgText:'努力加载中...',
            maxPage : <?php echo $output['total_page'];?>,
            finishedMsg : '没有记录了',
            finished : function() {
            	$('.raty').raty({
                    path: "<?php echo RESOURCE_SITE_URL;?>/js/jquery.raty/img",
                    readOnly: true,
                    width: 100,
                    score: function() {
                      return $(this).attr('data-score');
                    }
                });
            }
        }
    },function(newElements){
		var $newElems = $(newElements);
		$container.masonry('appended', $newElems, true);
	});

	$('.raty').raty({
        path: "<?php echo RESOURCE_SITE_URL;?>/js/jquery.raty/img",
        readOnly: true,
        width: 100,
        score: function() {
          return $(this).attr('data-score');
        }
    });
});
</script> 